<script setup>
// 订单数据
import { reactive, ref } from "vue";
import { Delete, Edit, RefreshRight, Search, View } from "@element-plus/icons-vue";
import { findOrderPageList } from "@/api/admin/order.js";
import { showMessage, showModel } from "@/composables/util.js";
import moment from 'moment'
// 定义响应式的表单对象
const form = reactive({
  number: '',
  startDate: '',
  endDate: '',
})

// 监听日期组件改变事件，并将开始结束时间设置到变量中
const datepickerChange = (e) => {
  form.startDate = moment(e[0]).format('YYYY-MM-DD HH:mm:ss')
  form.endDate = moment(e[1]).format('YYYY-MM-DD HH:mm:ss')
  console.log('开始时间：' + form.startDate + ', 结束时间：' + form.endDate)
}

const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
// 订单状态类型映射
const statusTypeMap = {
    '0': 'primary',
    '1': 'success',
    '2': 'danger'
}
const pickDate = ref('')

// 表单引用
const searchForm = ref(null)

// 重置查询条件
const reset = () => {
  form.number = ''
  form.startDate = ''
  form.endDate = ''
  pickDate.value = ''
}
const orderList = ref([])
// 当前页码，初值默认为1
const current = ref(1)
// 总记录数，初值默认为0
const total = ref(0)
// 每页显示的记录数，初值默认为10
const size = ref(10)
// 获取分页数据
function getOrderPageList() {
  // 调用后台分页接口，并传入所需参数
  findOrderPageList({ current: current.value, size: size.value, number: form.number, startDate: form.startDate, endDate: form.endDate })
    .then((res) => {
      if (res.data.success == true) {
        console.log("订单数据" + JSON.stringify(res.data.data))
        orderList.value = res.data.data
        current.value = res.data.current
        size.value = res.data.size
        total.value = res.data.total
      }
    })
}
getOrderPageList()
function handleIndex(index) {
  // 假设分页参数为 current（当前页）和 size（每页条数）
  return (current.value - 1) * size.value + index + 1;
}
// 存储选中项的ID数组
const selectedIds = ref([]);  
const handleSelectionChange = (selection) => {
  selectedIds.value = selection.map(item => item.id);  
  console.log(selectedIds)
};
</script>

<template>
  <!-- 查询表单 -->
  <el-form ref="searchForm" :model="form" style="
        margin:-10px 0 15px -10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px 20px;
    " class="card" shadow="always" inline>
    <el-form-item prop="username" style="
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        ">
      <el-text style="min-width: 60px; margin-right: 15px; text-align: center">订单编号</el-text>
      <el-input v-model="form.number" style="width: 220px" prefix-icon="Search" placeholder="请输入" />
    </el-form-item>

    <el-form-item style="
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;">
      <el-text style="min-width: 60px; margin-right: 15px; text-align: center">创建日期</el-text>
      <el-date-picker v-model="pickDate" type="daterange" range-separator="至" start-placeholder="开始时间"
        end-placeholder="结束时间" size="default" :shortcuts="shortcuts" style="width: 360px" @change="datepickerChange" />
    </el-form-item>

    <el-form-item style="margin-left: 10px; justify-content: center; padding-top: 14px">
      <el-button type="primary" plain :icon="Search" style="padding: 8px 20px;" @click="getOrderPageList">
        查询
      </el-button>
      <el-button type="warning" plain :icon="RefreshRight" style="margin-left: 12px; padding: 8px 20px;" @click="reset">
        重置
      </el-button>
    </el-form-item>
  </el-form>
  <!--数据展示区-->
  <div style="margin:-10px 0 15px -10px" class="card" shadow="always">
    <el-table :data="orderList" style="width: 100%" @selection-change="handleSelectionChange" row-key="id">
      <el-table-column type="selection" :reserve-selection="true" width="55" />
      <el-table-column type="index" :index="handleIndex" label="序号" width="80px" />
      <el-table-column property="cover" label="课程封面" width="100px">
        <template #default="scope">
          <el-image style="width: 60px; height: 40px" :src="scope.row.cover" :zoom-rate="1.2" :max-scale="7"
            :min-scale="0.2" :preview-src-list="[scope.row.cover]" :initial-index="4" preview-teleported="true"
            fit="cover" />
        </template>
      </el-table-column>
      <el-table-column property="title" label="订单课程名称">
        <template #default="scope">
          <span style="font-size: 13px">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column property="price" label="订单价格">
        <template #default="scope">
          <span style="font-size: 13px">{{ scope.row.price + '元' }}</span>
        </template>
      </el-table-column>
      <el-table-column property="number" label="订单编号">
        <template #default="scope">
          <span style="font-size: 13px">{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column property="orderTime" label="下单时间">
        <template #default="scope">
          <span style="font-size: 13px">{{ moment(scope.row.orderTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column property="orderTime" label="下单用户">
        <template #default="scope">
          <span style="font-size: 13px">{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column property="status" label="订单状态">
        <template #default="scope">
          <el-tag :type="statusTypeMap[scope.row.status]" size="small" v-if="scope.row.status === 0">待支付</el-tag>
          <el-tag :type="statusTypeMap[scope.row.status]" size="small" v-if="scope.row.status === 1">已支付</el-tag>
          <el-tag :type="statusTypeMap[scope.row.status]" size="small" v-if="scope.row.status === 2">已取消</el-tag>
        </template>
      </el-table-column>

    </el-table>

    <div class="demo-pagination-block">
      <el-pagination v-model:current-page="current" :page-size="[10, 20, 50]" :size="size" :disabled="disabled"
        background layout="total, prev, pager, next" :total="total" @size-change="handleSizeChange"
        @current-change="getOrderPageList" />
    </div>
  </div>
</template>

<style scoped></style>